<template>
  <div id="app">
    <transition v-bind:name="transition_name">
        <router-view/>
    </transition>

    <!--S底部导航-->
    <div id="footer" ref="footer" v-if="main.includes($route.name)">
      <cube-tab-bar class="footer" :data="tabs" v-model="tabs_selected" @change="tabsChange"></cube-tab-bar>
    </div>
    <!--E底部导航-->

  </div>
</template>

<script>
  import store from "./store.js";
  export default{
    data(){
      return {
        transition_name:"",  //主页面切换动画
        main:["index","member"],
        tabs:store.state.web_tabs,
        tabs_selected:store.state.web_tabs[0].value,
      };
    },
    created(){
      this.register();
    },
    methods:{
      //注册用户
      register(){
        this.$http.post(this.$sysinfo.url,this.$qs.stringify({
            pages:"member",
            doing:"register",
            uid:this.$sysinfo.uid
        }));
      },
      //页面底部导航切换
      tabsChange(value){
        this.$router.push({name:value});
      }
    }
  };
</script>

<style lang="less">
body{
  height:100%;
  color:#666;
  background: #fff;
}
.iconfont{
  width: 35px;
  height: 35px;
  fill: currentColor;
  overflow: hidden;
}
#footer{
  position: fixed;
  z-index:100;
  bottom:0;
  left:0;
  width:375px;
  height:50px;
  border-top:1px solid #eee;
  background: #fff;
    .footer{
        height:100%;
        font-size:14px;
    }
    .footer i{
        font-size:20px;
    }
}
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .cube-pullup-wrapper
    color:#ccc;
    font-size:14px;
</style>
